<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>jqGrid Demos</title> 
  
<link rel="stylesheet" type="text/css" media="screen" href="js/test/red.css" /> 
<link rel="stylesheet" type="text/css" media="screen" href="js/test/jqgrid.css" /> 
<link rel="stylesheet" type="text/css" media="screen" href="js/test/select.css" /> 
<style> 

</style> 
 
<script src="js/test/jquery.js" type="text/javascript"></script> 
<script src="js/test/red.js" type="text/javascript"></script> 
<script src="js/test/layout.js" type="text/javascript"></script> 
<script src="js/test/lang.js" type="text/javascript"></script> 
<script type="text/javascript"> 
	$.jgrid.no_legacy_api = true;
	$.jgrid.useJSON = true;
</script> 
<script src="js/test/select.js" type="text/javascript"></script> 
<script src="js/test/jqgrid.js" type="text/javascript"></script> 
<script src="js/test/tablend.js" type="text/javascript"></script> 
<script src="js/test/menu.js" type="text/javascript"></script> 
<script type="text/javascript"> 
jQuery().ready(function (){
		jQuery("#list1").jqGrid({
		   	url: 'books.xml',
			datatype: "xml",
		   	colNames:["Author","Title", "Price", "Published Date"],
		   	colModel:[
		   		{name:"Author",index:"Author", width:120, xmlmap:"ItemAttributes>Author"},
		   		{name:"Title",index:"Title", width:180,xmlmap:"ItemAttributes>Title"},
		   		{name:"Price",index:"Manufacturer", width:100, align:"right",xmlmap:"ItemAttributes>Price", sorttype:"float"},
		   		{name:"DatePub",index:"ProductGroup", width:130,xmlmap:"ItemAttributes>DatePub",sorttype:"date"}
		   	],
			height:250,
			width:1000,
		   	rowNum:10,
		   	pager:'#pager1',
		   	rowList:[10,20,30],
		    viewrecords: true,
			loadonce: true,
			xmlReader: {
					root : "Items",
					row: "Item",
					repeatitems: false,
					id: "ASIN"
			},
			caption: "XML Mapping example"
		});
		jQuery("#pager1").jqGrid('navGrid','#pager1',
			{}, //options
			{height:280,reloadAfterSubmit:false}, // edit options
			{height:280,reloadAfterSubmit:false}, // add options
			{reloadAfterSubmit:false}, // del options
			{} // search options	
			);
	});			
</script> 
 </script>
 <body>
 <table id="list1"></table>
<div id="pager1"></div>
 </body>
</html>